<script setup>
import { defineOptions, ref, watch } from 'vue'
import { columnToIn, columnToForeach } from '@/utils/colConvert.js'
import { convertTypeArr, convertPlaceholderArr } from '@/utils/config.js'
import { copy2Clipboard } from '@/utils/commonUtil.js'

defineOptions({
  name: 'ColToIn'
})
const data = ref({
  leftStr: '',
  rightStr: '',
  separator: ',',
  chooseType: 'in',
  placeholder: convertPlaceholderArr[0]
})

watch(data, () => {
  data.value.placeholder = convertPlaceholderArr[convertTypeArr.findIndex(item => item.value === data.value.chooseType)]
}, {
  deep: true,
  immediate: true
})
const columnConvert = () => {
  if (data.value.chooseType === 'in') {
    columnToIn(data.value)
  } else {
    columnToForeach(data.value)
  }
}
</script>
<template>
  <div class="container">
    <el-input
        type="textarea"
        class="textarea left"
        :row="data.row"
        v-model="data.leftStr"
        :placeholder="data.placeholder.left"
    />
    <el-input
        type="textarea"
        class="textarea right"
        :row="data.row"
        v-model="data.rightStr"
        :placeholder="data.placeholder.right"
    >
    </el-input>
  </div>
  <el-footer>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item>
            <el-input v-model="data.separator" placeholder="分隔符"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-select
                v-model="data.chooseType"
                placeholder="转换类型">
              <el-option
                  v-for="(item, index ) in convertTypeArr"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button @click="columnConvert" type="primary">
            转换
          </el-button>
          <el-button @click="copy2Clipboard(data)" type="primary">
            复制
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-footer>
</template>
<style></style>
